<template>
  <div></div>
</template>
<script>
import moment from 'moment'
import SockJS from 'sockjs-client'
import Stomp from 'stompjs'
// import store from '@/store'
import { servers } from '@/api/servers'
const serverName = servers.cms
export default {
  name: 'NotifySocket',
  components: {},
  props: {

  },
  data () {
    return {
      stompClient: {},
      visible: false,
      percent: 0,
      timer: null,
      token: ''
    }
  },
  created () {
    this.token = this.$store.getters.token
    this.initWebSocket()
  },
  watch: {

  },
  beforeDestroy: function () {
          // 页面离开时断开连接,清除定时器
          this.disconnect()
          this.clearInter()
  },
  methods: {
    moment,
    confirm () {
      this.notifyMsg = []
      this.percent = 0
    },
    cancel () {
      this.notifyMsg = []
      this.percent = 0
    },
    send (msg) {
      this.stompClient.send('/app/socket/send', {}, '广播内容')
    },
    sendPoint (s) {
      this.stompClient.send('/app/socket/sendChatMsgByOwn', {}, '广播内容')
    },
    initWebSocket () {
      this.connection()
    },
    clearInter () {
      if (this.timer) {
         clearInterval(this.timer)
         this.timer = null
      }
    },
    reconnect () {
      const _this = this
      // 断开重连机制,尝试发送消息,捕获异常发生时重连
      if (!_this.timer) {
        _this.timer = setInterval(() => {
          console.log('~~失败重连~~')
           _this.connection()
        }, 25000)
      }
      // 需要有一个失败重连得到问题
    },
     disconnect () {
        if (this.stompClient) {
            this.stompClient.disconnect()
        }
    },
    connection () {
      // 更换that指针
      const that = this
      const socket = new SockJS(process.env.VUE_APP_API_BASE_URL + serverName + '/stomp?token=' + this.token, null, { timeout: 40000 })
      this.stompClient = Stomp.over(socket)
      this.stompClient.debug = null // 关闭debug 模式
      // 建立连接，订阅主题
      this.stompClient.connect({}, (frame) => {
        this.stompClient.subscribe('/user/queue/msg', (val) => {
          const notifyMsg = JSON.parse(val.body)
          that.showNotifyMsg(notifyMsg)
        })
        this.stompClient.subscribe('/topic/sub', function (response) {
             console.log(response)
        })
        this.stompClient.subscribe('/topic/hardWareMonitor', function (val) {
           const notifyMsg = JSON.parse(val.body)
           that.$emit('monitor', notifyMsg)
        })
        this.clearInter()
        that.changeConnec('Socket 连接成功')
      }, (err) => {
                // 连接发生错误时的处理函数
                 console.log('--------------------------------------------------')
                console.log(err)
                that.reconnect()
                that.changeConnec('Socket 连接失败')
                alert(JSON.stringify(err))
      })
    },
    changeConnec (msg) {
      const socketMsgKey = 'socketMsgKey'
      this.$notification.open({
              socketMsgKey,
              message: 'Socket 状态通知',
              description: msg,
              placement: 'bottomRight'
      })
    },
    showNotifyMsg (notifyMsg) {
      const _this = this
      const key = this.token
      this.$notification.open({
              key,
              message: notifyMsg.channerName + '静态化通知',
              description: _this.getProgress(notifyMsg),
              placement: 'bottomRight',
              duration: 60,
              btn: h => {
                        return h(
                          'a-button',
                          {
                            props: {
                              type: 'primary',
                              size: 'small'
                            },
                            on: {
                              click: () => _this.$notification.close(key)
                            }
                          },
                          '确定'
                        )
              }
      })
      // if (notifyMsg.percent === 100) {
      //   _this.visible = false
      //   _this.$notification.close(_this.token)
      // }
    },
    getProgress (notifyMsg) {
       const html = () => {
           return (
             <div><a-progress status="active" percent={notifyMsg.percent} size="small"/>
                 <span>{notifyMsg.destPath} <br/> {notifyMsg.msg}</span>
             </div>
           )
       }
       return html
    }
  }
}
</script>
